﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="OverlayExample.aspx.cs" Inherits="UpdateProgressOverlayExtender_OverlayExample"
    MasterPageFile="~/MasterPage.master" %>

<%@ Register Assembly="Flan.Controls" Namespace="Flan.Controls" TagPrefix="cc1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    Try paging. See notes below.<br />
&nbsp;<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
                CellPadding="4" DataSourceID="SqlDataSource1" ForeColor="#333333" PageSize="5"
                OnRowCommand="GridView1_RowCommand">
                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                <EditRowStyle BackColor="#999999" />
                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Left" />
                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                <Columns>
                    <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
                    <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
                    <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
                    <asp:BoundField DataField="BirthDate" HeaderText="BirthDate" SortExpression="BirthDate" />
                    <asp:BoundField DataField="HireDate" HeaderText="HireDate" SortExpression="HireDate" />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT [LastName], [FirstName], [Title], [BirthDate], [HireDate] FROM [Employees]">
            </asp:SqlDataSource>
        </ContentTemplate>
    </asp:UpdatePanel>
    <br />
    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
        <ContentTemplate>
            <asp:GridView ID="GridView2" runat="server" AllowPaging="True" AutoGenerateColumns="False"
                CellPadding="4" DataSourceID="SqlDataSource2" ForeColor="#333333" PageSize="20"
                OnPageIndexChanged="GridView2_PageIndexChanged">
                <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
                <Columns>
                    <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
                    <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
                    <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" />
                    <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
                    <asp:BoundField DataField="Region" HeaderText="Region" SortExpression="Region" />
                </Columns>
                <RowStyle BackColor="#E3EAEB" />
                <EditRowStyle BackColor="#7C6F57" />
                <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
                <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Left" />
                <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
                <AlternatingRowStyle BackColor="White" />
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT [CompanyName], [ContactName], [ContactTitle], [City], [Region] FROM [Customers]">
            </asp:SqlDataSource>
        </ContentTemplate>
    </asp:UpdatePanel>
    <br />
    <asp:UpdatePanel ID="UpdatePanel3" runat="server">
        <ContentTemplate>
            <asp:GridView ID="GridView3" runat="server" DataSourceID="SqlDataSource3" PageSize="5"
                CellPadding="4" AutoGenerateColumns="False" AllowPaging="True" OnPageIndexChanged="GridView3_PageIndexChanged"
                BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px">
                <FooterStyle BackColor="#FFFFCC" ForeColor="#330099"></FooterStyle>
                <Columns>
                    <asp:BoundField DataField="CompanyName" SortExpression="CompanyName" HeaderText="CompanyName">
                    </asp:BoundField>
                    <asp:BoundField DataField="ContactName" SortExpression="ContactName" HeaderText="ContactName">
                    </asp:BoundField>
                    <asp:BoundField DataField="ContactTitle" SortExpression="ContactTitle" HeaderText="ContactTitle">
                    </asp:BoundField>
                    <asp:BoundField DataField="City" SortExpression="City" HeaderText="City"></asp:BoundField>
                    <asp:BoundField DataField="Region" SortExpression="Region" HeaderText="Region"></asp:BoundField>
                </Columns>
                <RowStyle BackColor="White" ForeColor="#330099"></RowStyle>
                <SelectedRowStyle BackColor="#FFCC66" ForeColor="#663399" Font-Bold="True"></SelectedRowStyle>
                <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Left"></PagerStyle>
                <HeaderStyle BackColor="#990000" ForeColor="#FFFFCC" Font-Bold="True"></HeaderStyle>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource3" runat="server" SelectCommand="SELECT [CompanyName], [ContactName], [ContactTitle], [City], [Region] FROM [Customers]"
                ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"></asp:SqlDataSource>
        </ContentTemplate>
    </asp:UpdatePanel>
    <br />
    <br />
    <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"
        DisplayAfter="0">
        <ProgressTemplate>
            <div>
                <img src="../Resources/Images/indicator.gif" />
                Loading in 4 seconds...
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:UpdateProgress ID="UpdateProgress2" runat="server" AssociatedUpdatePanelID="UpdatePanel2"
        DisplayAfter="0">
        <ProgressTemplate>
            <div>
                <img src="../Resources/Images/indicator.gif" />
                Loading in 4 seconds...
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    &nbsp;
    <asp:UpdateProgress ID="UpdateProgress3" runat="server" AssociatedUpdatePanelID="UpdatePanel3"
        DisplayAfter="0">
        <ProgressTemplate>
            <div>
                <img src="../Resources/Images/indicator.gif" />
                Loading in 4 seconds...
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    &nbsp;
    <!-- UpdateProgressOverlayExtender  -->
    <cc1:UpdateProgressOverlayExtender ID="UpdateProgressOverlayExtender1" runat="server"
        ControlToOverlayID="GridView1" CssClass="updateProgress" TargetControlID="UpdateProgress1" />
    <cc1:UpdateProgressOverlayExtender ID="UpdateProgressOverlayExtender2" runat="server"
        ControlToOverlayID="form1" CssClass="updateProgress" TargetControlID="UpdateProgress2" />
    <cc1:UpdateProgressOverlayExtender ID="UpdateProgressOverlayExtender3" runat="server"
        CssClass="updateProgress" TargetControlID="UpdateProgress3" OverlayType="Browser" />
</asp:Content>
<asp:Content ID="Content2" runat="server" ContentPlaceHolderID="ContentPlaceHolder2">
    <ul>
        <li>UpdateProgressOverlayExtender1 has <span style="font-family: Courier New">GridView1</span><span
            style="font-family: Tahoma"></span> as the <span style="font-family: Courier New">ControlToOverlayID<span
                style="font-family: Tahoma">.</span></span></li>
        <li>UpdateProgressOverlayExtender2 &nbsp;has <span style="font-family: Courier New">
            form1</span><span style="font-family: Tahoma"></span> as the <span style="font-family: Courier New">
                ControlToOverlayID<span style="font-family: Tahoma">.</span></span></li>
        <li><span style="font-family: Courier New"><span style="font-family: Tahoma">UpdateProgressOverlayExtender3
            has <span style="font-family: Courier New">OverlayType <span style="font-family: Tahoma">
                set to "Browser" </span></span></span></span></li>
        <li>We have defined a CssClass of <strong>.updateProgress</strong> in the UpdateProgressOverlayExtender
            which gets applied to the UpdateProgress control - rendered as a div.<br />
            We have also defined a class of &nbsp;<strong>.updateProgress div</strong> which
            is applied to the inner div (in bold below) so that it can be positioned in the
            middle using CSS (See the CSS file).<br />
            <span style="font-size: 8pt">&lt;asp:UpdateProgress ID="UpdateProgress1" runat="server"
                AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="0"&gt;<br />
                &nbsp; &nbsp; &lt;ProgressTemplate&gt;<br />
                &nbsp; &nbsp; &nbsp; &nbsp; <strong>&lt;div&gt;</strong><br />
                &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src="../Resources/Images/indicator.gif"
                /&gt; Loading...
                <br />
                &nbsp; &nbsp; &nbsp; &nbsp; <strong>&lt;/div&gt;<br />
                </strong>&nbsp; &nbsp; &lt;/ProgressTemplate&gt;<br />
                &lt;/asp:UpdateProgress&gt;</span></li>
    </ul>
</asp:Content>
